<template>
  <div>
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <person
        @edit="editShow"
        @delete="deleteConfirm"
        @add="show = true"
      ></person>
    </div>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="warning"
        native-type="submit"
        @click="addshow = true"
        >添加信息卡</van-button
      >
    </div>
    <div style="margin: 16px">
      <van-button round block type="danger" native-type="submit" @click="logOut"
        >退出登录</van-button
      >
    </div>

    <van-popup
      v-model="show"
      position="bottom"
      round
      :style="{ height: '50%' }"
      closeable
    >
      <van-form @submit="onSubmit">
        <van-field
          v-model="editForm.name"
          name="姓名"
          label="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="editForm.age"
          name="年龄"
          label="年龄"
          :rules="[{ required: true, message: '请填写年龄' }]"
        />
        <van-field
          v-model="editForm.sex"
          name="性别"
          label="性别"
          :rules="[{ required: true, message: '请填写常住地' }]"
        />
        <van-field
          v-model="editForm.address"
          name="常住地"
          label="常住地"
          :rules="[{ required: true, message: '请填写常住地' }]"
        />
        <van-field
          v-model="editForm.phone"
          name="电话"
          label="电话"
          :rules="[{ required: true, message: '请填写身电话' }]"
        />
        <van-field
          v-model="editForm.CHID"
          name="身份证"
          label="身份证"
          :rules="[{ required: true, message: '请填写身份证' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
    <van-popup
      v-model="addshow"
      position="bottom"
      round
      :style="{ height: '50%' }"
      closeable
    >
      <van-form @submit="addSubmit">
        <van-field
          v-model="addform.name"
          name="姓名"
          label="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="addform.age"
          name="年龄"
          label="年龄"
          :rules="[{ required: true, message: '请填写年龄' }]"
        />
        <van-field
          v-model="addform.address"
          name="常住地"
          label="常住地"
          :rules="[{ required: true, message: '请填写常住地' }]"
        />
        <van-field
          v-model="addform.sex"
          name="性别"
          label="性别"
          :rules="[{ required: true, message: '请填写常住地' }]"
        />
        <van-field
          v-model="addform.phone"
          name="电话"
          label="电话"
          :rules="[{ required: true, message: '请填写身电话' }]"
        />
        <van-field
          v-model="addform.CHID"
          name="身份证"
          label="身份证"
          :rules="[{ required: true, message: '请填写身份证' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import person from '../../views/PersonMessage.vue'
export default {
  components: {
    person
  },
  data () {
    return {
      addshow: false,
      show: false,
      editForm: {
        name: '',
        age: '',
        address: '',
        CHID: '',
        phone: '',
        sex: ''
      },
      patientID: window.sessionStorage.getItem('id'),
      addform: {
        name: '',
        age: '',
        address: '',
        CHID: '',
        phone: '',
        sex: ''
      }
    }
  },
  methods: {
    logOut () {
      window.sessionStorage.clear()
      this.$router.push('/login')
      this.$Toast.success('已退出登录')
    },
    edit () {
      this.getMessage()
      this.show = true
    },
    async onSubmit () {
      const { data: res } = await this.$http.post(
        '/user/msgcard/editmsgcard/' + this.editForm._id,
        this.editForm
      )
      if (res.status !== 200) return this.$Toast.fail('修改信息失败')
      this.show = false
      this.$Toast.success('修改信息成功,请刷新界面')
    },
    async getMessage () {
      const { data: res } = await this.$http.get(
        '/user/msgcard/msgcardinfo/' + this.patientID
      )
      if (res.status !== 200) return this.$Toast.fail('获取信息失败')
      this.editForm = res.user
    },
    onClickLeft () {
      this.$router.push('/index')
    },
    async addSubmit () {
      const { data: res } = await this.$http.post(
        '/user/msgcard/addmsgcard/' + this.patientID,
        this.addform
      )
      if (res.status !== 200) return this.$Toast.fail('添加信息失败')
      this.addshow = false
      this.$Toast.success('添加信息卡成功，请重新刷新界面')
    },
    editShow (data) {
      console.log(data)
      this.editForm = data
      this.show = true
    },
    deleteConfirm (id) {
      this.$Dialog.confirm({
        title: '删除操作',
        message: '此操作将永久删除此信息卡'
      }).then(async () => {
        const { data: res } = await this.$http.delete('/user/msgcard/delete/' + id)
        if (res.status !== 200) return this.$Toast.success('删除成功')
        this.getMessage()
      })
        .catch(() => {

        })
    }
  }
}
</script>

<style>
</style>
